<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<fieldset id="app">
			<legend><h2>app实例</h2></legend>
			<p>{{app_Msg}}</p>
			<child1 @c1_event="getC1Msg"></child1><!-- 自定义事件 -->
		</fieldset>
		<template id="child1">
			<fieldset>
				<legend><h2>这是child1组件</h2></legend>
				<button type="button" @click="c1ToApp">传递参数</button><!-- 点击事件 触发自定义事件 -->
			</fieldset>
		</template>
		<script type="text/javascript">
			/* 
				子组件向父实例（组件）传值，通过"自定义事件"实现传值 
				1、给子组件绑定自定义事件，赋值父实例（组件）的方法
				2、合适的时机触发自定义事件，调用父实例（组件）的方法
				3、在父实例（组件）的函数里获取到传入的值
			*/
			let child1={
				template:'#child1',
				data(){
					return {
						c1Msg:"child1的msg数据"
					}
				},
				methods:{
					c1ToApp(){
						this.c1Msg="已被修改";
						this.$emit("c1_event",this.c1Msg)
						setTimeout(()=>{
							let time=Date();
							this.c1Msg=time;
							this.$emit("c1_event",this.c1Msg);
						},1000)
					}
				}
			}
			new Vue({
				el:'#app',
				data:{
					app_Msg:''
				},
				components:{
					child1
				},
				methods:{
					getC1Msg(v){
						this.app_Msg=v;
					}
				}
			})
		</script>
	</body>
</html>
